<template lang="html">
   <div class="logins">
     <div class="banner12">
       <label id="fanhui" @click="back"><img src="../../static/img/return1.png" alt=""></label>
       <label>登录ONE</label>
     </div>
   <div class="bd">
       <form id="formLogin">
         <div class="username">
           <input type="text" placeholder="账号" v-model="usernames">
         </div>
         <div class="password">
           <input type="password" placeholder="密码" v-model="password">
         </div>
         <div class="wang">
           <router-link to="/searchs">忘记密码？</router-link>
         </div>
         <div class="ji">
           <input type="checkbox" name="checkbox1" value="1" v-model="checked">记住密码
         </div>
         <div class="sub_denglu">
           <button type="button" class="submitBtn" @click.prevent='loginyan()'>登录</button>
         </div>
       </form>
     </div>
     <div class="ft">
        <router-link to="/regins">还没有账号？马上注册</router-link>
     </div>
     <div id="mess" v-show='shows'>
       <div class="box">
         <p>{{ ress }}</p>
         <label @click='queding()'>确定</label>
       </div>
     </div>
   </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    // this.$route.replace('/regin')
    return {
      usernames: "",
      password: "",
      userid:"",
      shows:false,
      codes:'',
      ress:'',
      checked:[]
    }
  },
  methods: {
    back() {
      history.back()
    },
    loginyan() {
      this.axios.get('http://10.0.156.247:8888/login?usname=' + this.usernames + '&password=' + this.password).then(data => {
        console.log(data);
           if(data.data.code!=0){
             this.codes=1;
             this.ress='登录成功！';
             localStorage.setItem('username',data.data[0].username);
             localStorage.setItem('userids',data.data[0].userid);
             localStorage.setItem('perphoto',data.data[0].userphoto);
             localStorage.setItem('perbackimg',data.data[0].perbackimg);
            //  this.shows=true;
             if(this.checked[0]==1){
               localStorage.setItem('userid',data.data[0].userid);
              //  localStorage.setItem('username',data.data[0].username);
               localStorage.setItem('password',data.data[0].password);
               localStorage.setItem('bao',1);

              //  console.log(localStorage.getItem('userid'));
             }else{
              //  localStorage.clear();
              localStorage.setItem('userid','');
              localStorage.setItem('bao',1);
              //  console.log(localStorage.getItem('userid'));
             }
             this.$router.push({
               path:'/login'
             })
           }else{
             this.shows=true;
             this.codes=0;
             this.ress='登录失败！重试';
           }
          //  console.log(this.shows,this.codes,this.ress);
      })
    },
    queding(){
      // if(this.codes==1){
      //   console.log('成功');
      //   this.shows=false;
      //   this.$router.push({
      //     path:'/login'
      //   })
      // }else{
        console.log('shibai');
        this.shows=false;
        this.$router.push({
          path:'/logins'
        })
      // }
    }
  },
  created(){
    if(localStorage.getItem('userid')!=null){
      this.usernames=localStorage.getItem('userid');
      this.password=localStorage.getItem('password');
    }else{
      this.usernames='';
      this.password='';
    }
  }
}
</script>
<style media="screen">
body {
  margin: 0;
  padding: 0;
}
</style>
<style lang="css" scoped>
body{
  margin:0;
  padding: 0;
}

.logins{
  height: 700px;
  position: relative;
  /*background: linear-gradient(to bottom,#562e37,#f17c67);*/
  background-image: url(../../static/img/timg.jpg);
  color: white;
}

.banner12{
  height: 2.5rem;
  /*background: white;*/
  line-height: 2.5rem;
  color: #646a58;
  font-size: 1.8rem;
  width: 100%;
  position:fixed;
  top: 0.6rem;
  left: 0;
}
#fanhui{
  position: absolute;
  height: 1.5rem;
  width: 0.9rem;
  /*background-image: url(../../static/img/return1.png);
  background-size: 15px,15px;*/
  top: 0.3rem;
  left: 0.9rem;
}
#fanhui>img{
  height: 1.5rem;
  width: 0.8rem;
}

.bd{
  position: absolute;
  top: 30%;
  left: 20%;
}
.username{
  margin-bottom: 0.9rem;
}
.username>input{
  height: 2.2rem;
  width: 18rem;
  border: none;
}
.password{
  margin-bottom: 12px;
}
.password>input{
  height: 2.2rem;
  width: 18rem;
  border: none;
}
.wang{
  margin-bottom: 10px;
  margin-left: 13rem;
}
.wang>a{
  color: white;
  text-decoration: none;
}
.sub_denglu>button{
   height: 2rem;
   width: 4.5rem;
   border-radius: 5px;
   border: none;
   color: gray;
   font-size: 1.6rem;
}
.ft{
  position: absolute;
  top: 55%;
  left: 28%
}
.ft>a{
  color: white;
  font-size: 1.8rem;
  text-decoration: none;
}
#mess{
  height: 100%;
  width: 100%;
  background: rgba(128, 138, 135, 0.5);
  position: relative;
}
#mess>.box{
  width: 60%;
  height: 20%;
  margin: auto;
  background: white;
  position: absolute;
  top: 30%;
  left: 20%;
  border-radius: 15px;
  color:black;
  font-size: 2.5rem;
}
#mess>.box>p{
  margin: auto;
  margin-top: 1.0rem;
  margin-bottom: 3.0rem;
}
#mess>.box>label{
  display: inline-block;
  width: 6.0rem;
  height: 3rem;
  text-align: center;
  vertical-align: middle;
  background: #40e0d0;
  border-radius: 5px;
}
.ji{
  text-align: left;
}
</style>
